<template>
  <div>
    <MyHead></MyHead>
    <div class="links">
      <van-grid :border="false" :column-num="5" icon-size="39">
        <van-grid-item v-for="(item,index) in arr" :key="index" :text="item.title" :icon="item.icon" >
        </van-grid-item>
      </van-grid>
    </div>
    <div class="shops">
      <div class="tig">
        <img :src="arr1.icon" alt="">
        <p class="title">{{arr1.title}}</p>
        <p class="subTitle">{{arr1.subTitle}}</p>
      </div>
      <div class="list">
        <div v-for="(item,index) in arr1.list" :key="index">
          <img :src="item.imgSrc" alt="">
          <p class="price">￥ {{item.price}}</p>
        </div>
      </div>
      
    </div>
    <Lists :mess="id"></Lists>

  </div>
</template>

<script>
import Lists from '../components/Lists'
import MyHead from '../components/MyHead'

export default {
  name: 'Choiceness',

  data() {
    return {
      arr: [
        {
          icon:
            'https://funimg.pddpic.com/brand/jinbao/miaosha.png?imageView2/2/w/1300/q/80/format/webp',
          tig:
            'https://funimg.pddpic.com/jinbao/3538143e-00f5-46de-a0bb-029cccf0c7a6.gif?imageView2/2/w/1300/q/80',
          title: '限时秒杀',
        },
        {
          icon:
            'https://funimg.pddpic.com/brand/jinbao/chongzhi.png?imageView2/2/w/1300/q/80/format/webp',
          tig:
            'https://funimg.pddpic.com/jinbao/deposit-icon-tag/6.gif?imageView2/2/w/1300/q/80',
          title: '充值中心',
        },
        {
          icon:
            'https://funimg.pddpic.com/brand/jinbao/hongbao.png?imageView2/2/w/1300/q/80/format/webp',
          tig: '',
          title: '拆红包',
        },
        {
          icon:
            'https://funimg.pddpic.com/jinbao/9e3d4b43-14e7-4e6b-a91b-cbacea9d26b2.png.slim.png?imageView2/2/w/1300/q/80/format/webp',
          tig: '',
          title: '1块9特卖',
        },
        {
          icon:
            'https://funimg.pddpic.com/jinbao/icons/train_ticket.png.slim.png?imageView2/2/w/1300/q/80/format/webp',
          tig: '',
          title: '火车票',
        },
      ],
      arr1: {
        icon:
          'https://funimg.pddpic.com/brand/jinbao/baiyi.png?imageView2/2/w/78/q/80/format/webp',
        title: '百亿补贴',
        subTitle: '大牌正品',
        list: [
          {
            imgSrc:
              'https://commimg.pddpic.com/phone_adx/94fe8866-484c-11ec-a8a1-0a580a2527ed.jpg?imageView2/2/w/192/q/80/format/webp',
            price: '40.9',
          },
          {
            imgSrc:
              'https://img.pddpic.com/mms-material-img/2021-11-21/9b6b991c-070e-4c1c-8981-69c0770de355.png?imageView2/2/w/192/q/80/format/webp',
            price: '129.9',
          },
          {
            imgSrc:
              'https://img.pddpic.com/mms-material-img/2021-11-19/a3f9d62e7176911aecd64bc7fb7ac3c2.jpeg?imageView2/2/w/192/q/80/format/webp',
            price: '69.9',
          },
          {
            imgSrc:
              'https://commimg.pddpic.com/auto-image/46bcad66-3b01-11ec-a42f-0a580a4c70e2.jpg?imageView2/2/w/192/q/80/format/webp',
            price: '49.9',
          },
        ],
      },
    }
  },

  mounted() {
    
  },

  methods: {},
  components:{
    Lists,
    MyHead
  },
  props:['id']
}
</script>

<style lang="less" scoped>
.links {
  width: 100%;
  // height: 1.5rem;
  padding: 0.2rem 0 0 0.06rem;
  background: #fff;
  margin-bottom: 0.16rem;
}
.shops {
  width: 100%;
  height: 1.98rem;
  padding: 0 .24rem 0 .16rem;
  overflow:hidden;
  background:#fff;
  margin:.16rem 0;
  display: flex;
  align-items: center;
  .tig {
    flex-direction: column;
    width:1.28rem;
    margin-top: .08rem;
    display:flex;
    align-items: center;
    img {
      width:.78rem;
      height: .78rem;
      margin-bottom:.08rem;
      border-radius: 50%;
      background: #fcfcfc;
    }
    .title {
      color:#151516;
      font-size:.28rem;
      font-weight: 700;
    }
    .subTitle {
      color:#999;
    }
  }
  .list {
    flex:1;
    display:flex;
    justify-content: space-between;
    text-align: center;
    div {
      flex:1
    }
    img {
      width:1.28rem;
      height:1.28rem;
      margin:0 auto;
    }
    .price {
      color:#e02e24;
      font-size:.28rem;
      font-weight: 700;
    }
  }
}
</style>
